<template>
  <div class="tmpl">
    <span @click="subtract">-</span><span>{{count}}</span><span @click="add">+</span>
  </div>
</template>

<script type="text/javascript">
export default {
  data(){
    return {
      count: 1

    }
  },

  methods: {
    subtract(){
      if(this.count > 1){
        this.count--
      }else{
        this.count = 1;
      }
      this.$emit('sendCount',this.count)
    },
    add(){
      this.count++;
      this.$emit('sendCount',this.count)
    },

  },

}
</script>

<style type="text/css" scoped>
  .tmpl{
    text-align: center;
  }
  .tmpl span{
    padding: 5px 15px;
    border: 1px solid #333;
  }
  .tmpl span:nth-child(2){
    border-left: none;
    border-right: none;
  }
</style>